@import '../assets/theme.scss';
#item{
  $item-color: #27B197;
  $width: 924px;
  .see{
    font-size: 12px;
  }
  .new-public{
    width: $width;
  }
  .item-body{
    width: $width;
    margin: 40px auto 0;
    .item{
      $pic-width: 560px;
      .pic{
        width: $pic-width;
        height: $pic-width;
        background-color: $color-main + #555;
        float: left;
        position: relative;
        .show-pic{
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          position: absolute;
          max-height: $pic-width;
          max-width: $pic-width;
          cursor: pointer;
        }
        .pic-list{
          $list-height: 80px;
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          background-color: rgba($color-main, 0.5);
          text-align: center;
          overflow: hidden;
          height: $list-height;
          &.small{
            height: 10px;
            opacity: 0;
            transition: $default-transition;
            &:hover{
              height: $list-height;
              opacity: 1;
            }
          }
          li{
            cursor: pointer;
            width: $list-height - 10px;
            height: $list-height - 10px;
            display: inline-block;
            margin: 5px 2px;
            border: 5px solid transparent;
            transition: $default-transition;
            opacity: .7;
            img{
              width: $list-height - 20px;
              height: $list-height - 20px;
              box-shadow: 0 0 4px #FFF;
            }
            &:hover, &.hover{
              opacity: .9;
              border-color: rgba(#FFF, .8);
            }
          }
        }
      }
      .detail{
        width: $width - $pic-width;
        height: $pic-width;
        background-color: #FFF;
        float: left;
        .i-name{
          line-height: 30px;
          padding: 10px;
          padding-left: 20px;
          font-size: 18px;
          font-weight: 400;
          color: $item-color;
        }
        .price{
          color: $color-main;
          font-size: 28px;
          padding-left: 20px;
          .reduction{
            font-size: 12px;
            padding: 4px;
            border-radius: 4px;
            margin-left: 10px;
            background-color: $color-main + #555;
            color: #FFF;
            box-shadow: 1px 1px 2px #908989;
          }
        }
        .line{
          margin: 40px 0;
          height: 0px;
          border-top: 1px dashed $color-forbid;
        }
        .other-info{
          position: relative;
          height: 34px;
          margin-top: 18px;
          .text{
            right: 250px;
            line-height: 34px;
            background-color: $item-color;
            position: absolute;
            padding: 0 10px;
            color: #FFF;
          }
          .content{
            position: absolute;
            left: 140px;
            line-height: 34px;
            .icon{
              font-size: 30px;
              cursor: pointer;
              color: $color-main + #333;
              transition: $default-transition;
              &:hover{
                color: $color-main - #333;
                text-shadow: 3px 3px 6px $color-main;
              }
            }
          }
        }
      }
      .des{
        float: left;
        margin: 20px 0;
        width: $width;
        background-color: #FFF;
        .icon{
          font-size: 40px;
          position: absolute;
          margin-top: 16px;
          margin-left: 20px;
          color: $color-main;
        }
        p{
          display: block;
          line-height: 30px;
          text-indent: 3em;
          font-size: 20px;
          padding: 20px;
        }
      }
    }
  }
}